<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加用户</title>
    <link rel="stylesheet" href="../../../static/web/layui/css/layui.css" th:href="@{/web/layui/css/layui.css}" />

    <script src="../../../static/web/layui/layui.js" th:src="@{/web/layui/layui.js}"></script>
    <script src="../../../static/web/jquery-3.3.1/jquery-3.3.1.js" th:src="@{/web/jquery-3.3.1/jquery-3.3.1.js}"></script>
    <script src="../../../static/web/kitadmin/js/common.js" th:src="@{/web/kitadmin/js/common.js}"></script>
</head>

<body>
<form class="layui-form layui-form-pane" style="margin-left: 20px;">

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
            <legend style="font-size:20px;font-weight: bold"><i class="layui-icon layui-icon-form" style="font-size:20px;"></i>用户信息</legend>
        </fieldset>
    </div>
    <div class="layui-form-item">
        <label for="username" class="layui-form-label">
            <span style="color: red">*</span>用户名
        </label>
        <div class="layui-input-inline">
            <input type="text"  id="username" name="username"  lay-verType="tips" lay-verify="required|username" autocomplete="off" class="layui-input">
        </div>
        <div id="usernameInfo" class="layui-form-mid layui-word-aux" style="margin-left: 12px;">
            <span style="color: red;">将会成为您唯一的用户名</span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label for="realName" class="layui-form-label">
                <span style="color: red;">*</span>姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="realName" name="realName" lay-verType="tips" lay-verify="required|realName"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label for="age" class="layui-form-label">
                <span style="color: red;">*</span>年龄
            </label>
            <div class="layui-input-inline">
                <input type="text" id="age" name="age"  lay-verType="tips" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label for="password" class="layui-form-label">
                <span style="color: red;">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" lay-verType="tips"  lay-verify="required|password" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label for="L_repass" class="layui-form-label">
                <span style="color: red;">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="l_repass" name="repass" lay-verType="tips" lay-verify="required|repass" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="email" class="layui-form-label">
            <span style="color: red;">*</span>邮箱
        </label>
        <div class="layui-input-block">
            <input type="email" id="email" style="width: 93%" name="email" lay-verType="tips" lay-verify="required|email" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色选择</label>
        <div class="layui-input-block">
            <span th:each="role: ${roleList}">
                 <input type="checkbox" name="role" th:title="${role.remark}" lay-filter="check" th:value="${role.id}">
            </span>
        </div>
    </div>

    <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;position: fixed;bottom: 1px;margin-left:-20px;">
        <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
            <button  class="layui-btn " lay-filter="add" lay-submit style=" height:38px;line-hight:38px;">
                <i class="layui-icon layui-icon-ok-circle" style="vertical-align: middle"></i> 保存
            </button>
            <button  class="layui-btn layui-btn-primary" id="close" style=" height:38px;line-hight:38px;">
                <i class="layui-icon layui-icon-close-fill" style="vertical-align: middle"></i> 取消
            </button>
        </div>
    </div>
</form>


<script  type="text/javascript" th:inline="javascript">


    $(function(){
        var usernameErrorMsg = '';

        $('#username').on('change', function (e) {
            var username = $(this).val();
            $.ajax({
                url: '/webs/user/checkUser',
                data: {username: username},
                async: false,
                type: 'post',
                success: function (data) {
                    $('#usernameInfo').empty();
                    if (data.code == 'SUCCESS') {
                        usernameErrorMsg = '';
                        $('#usernameInfo').append("<i class='layui-icon layui-icon-ok-circle' style='color: green'></i>");
                    } else {
                        usernameErrorMsg = "用户名：" + username + "已经存在！";
                        $('#usernameInfo').append("<i class='layui-icon layui-icon-close-fill' style=' color: red'>"+usernameErrorMsg+"</i>");
                    }

                }, beforeSend: function () {
                    $('#usernameInfo').empty();
                    $('#usernameInfo').append("<i class='layui-icon layui-icon-loading' style='font-size: 30px; color: green'></i>");
                }
            });

        });


        layui.use('form', function(){
            var form = layui.form;

            //自定义验证规则
            form.verify({
                username: function(value){
                    if(value.match(/[\u4e00-\u9fa5]/)){
                        return "用户名不能为中文";
                    }
                    if(!/(.+){3,12}$/.test(value)){
                        return "用户名必须3到12位";
                    }
                    if(usernameErrorMsg) {
                        return usernameErrorMsg;
                    }

                }
                ,password: [
                    /(.+){6,12}$/,
                    '密码必须6到12位'
                ]
                ,repass: function(value){
                    if($('#password').val()!=$('#l_repass').val()){
                        return '两次密码不一致';
                    }
                }
            });

            //绑定关闭按钮
            $('#close').on('click', function(){
                closeWindow(window.name);
            });

            //监听提交
            form.on('submit(add)', function(data){
                var r = $(':checkbox[name="role"]');
                var role=[];
                for(var i=0;i<r.length;i++){
                    if(r[i].checked){
                        role.push(r[i].value);
                    }
                }
                data.field.role=role;

                $.ajax({
                    url: '/webs/user/doAddUser',
                    type:'post',
                    data: data.field,
                    traditional: true,
                    success:function(data){
                        if(data.code == 'SUCCESS'){
                            window.parent.userListTable.reload();
                            closeWindow(window.name);
                            window.top.layer.msg("添加成功！",{icon:6,offset: 'rb',area:['200px','80px'],anim:2});
                        }else{
                            window.top.layer.msg("添加失败",{icon: 5});
                        }
                    },error:function(e){
                        window.top.layer.alert("发生错误！", {icon: 6},function () {
                            closeWindow(window.name);
                        });
                    }
                });
                return false;
            });
            form.render();
        });
    });



</script>
</body>

</html>
